import React from 'react'
import "./Cate.less"

function Cate(props) {
    let arr = ['未使用', '已使用', '已过期'];
    let { n, setN, showList } = props
    return (
        <div className="coupon">
            <div className="cou">
                {
                    arr.map((item, index) => (

                        <div key={item} className={index === n ? 'select' : ''} onClick={() => setN(index)}>{item}</div>

                    ))
                }
            </div>

            {
                showList.map(item => (
                    <div key={item.id} className="bott">
                        <div className="top">
                        <div className="left">
                        <p className="yen">&yen;{item.money}</p>
                        <p className="man">满{item.limit_money}可用</p>
                        </div>
                        <div className="right"> 
                        <p className="title">{item.title}</p>
                        <p className="time">{new Date(Number(item.begintime)).toLocaleDateString()}至{new Date(Number(item.endtime)).toLocaleDateString()}</p>

                        </div>
                       </div>
                       <div className="bottom">
                           使用规则:{item.description}
                       </div>
                    </div>
                ))
            }
        </div>
    )
}
export default React.memo(Cate)